import { useState, useEffect, useContext } from "react";
import { NavBar, List, InfiniteScroll } from "antd-mobile";
import { useHistory } from 'react-router-dom';
import AvatarImage from "../../../components/AvatarImage";

import { MySdkStoreContext } from '../../../context';

import "./style.scss";

export default function() {
  const history = useHistory();
  const mySdkStore = useContext(MySdkStoreContext);
  const [list, setList] = useState([]);
  const [pagination, setPagination] = useState({ pageIndex: 1, next: 0 });

  const getList = async (pageIndex) => {
    const res =  await mySdkStore.sdk.queryConversationList({ pageIndex, pageSize: 40, type: 'group' });
    const  { list: rows, next } = res;
    setPagination({ pageIndex, next: +next });
    setList(pageIndex === 1 ? rows : [...list, ...rows]);
  }

  const getNextData = async () => {
    await getList(pagination.pageIndex + 1);
  }

  useEffect(() => {
    getList(1);
  }, []);

  return (<div className="groupMemberPage">
      <NavBar onBack={() => history.goBack()} style={{ background: '#fff', border: 'none' }}>我的群组</NavBar>
      <List style={{ '--border-top': 0, '--border-bottom': 0, '--border-inner': 0, marginTop: 12 }}>
        {list.map(item => {
          return <List.Item
              key={item.cid}
              prefix={<AvatarImage
              src={item.sessionLogoUrl}
              style={{ borderRadius: 8 }}
              fit='cover'
              width={42}
              height={42}
              groupName={item.name}
            />}
            description={item.groupVO?.memberCount}
          ><span onClick={() => history.push({ pathname: `/chatDetail/${item.cid}`})}>{item.name}</span></List.Item>
        })}
      </List>
      <InfiniteScroll loadMore={getNextData} hasMore={pagination.pageIndex < pagination.next} />
  </div>
  )
}